<template>
  <div class="vacation">
    <span class="title">假期和特殊工作日设置</span>
    <div class="holiday">
      <div class="h_title">
        <div class="tl1">假期</div>
        <div class="tl2">如工作日为假期将日期添加至此处</div>
      </div>
      <div class="lists">
        <div class="list" v-for="(i,index) in holiday_list" :key="index">
          <div class="list_left">{{toTime(i.time)}} <span v-if="i.description!=''&& i.description!=null">({{i.description}})</span></div>
          <div class="list_right" @click="deleteDay(i.id)">删除</div>
        </div>
        <div class="add" @click="showWorkDayPlant(0)">
          <div class="add_left"><i class="el-icon-circle-plus"></i></div>
          <div class="add_right">添加</div>
        </div>
      </div>
    </div>
    <div class="holiday">
      <div class="h_title">
        <div class="tl1">特殊工作日</div>
        <div class="tl2">如周末为工作日将日期添加至此处</div>
      </div>
      <div class="lists">
        <div class="list" v-for="(i,index) in work_list" :key="index">
          <div class="list_left">{{toTime(i.time)}} <span v-if="i.description!=''&& i.description!=null">({{i.description}})</span></div>
          <div class="list_right" @click="deleteDay(i.id)">删除</div>
        </div>
        <div class="add" @click="showWorkDayPlant(1)">
          <div class="add_left"><i class="el-icon-circle-plus"></i></div>
          <div class="add_right">添加</div>
        </div>
      </div>
    </div>
    <div class="bc" v-if="showWorkDay"></div>
    <workDay v-if="showWorkDay" :chooseType="chooseType" @getBack="getBack"></workDay>
  </div>
</template>

<script>
  import qs from 'qs'
  import {mapGetters,mapActions} from 'vuex'
  import workDay from '../upstates/workDay'
  export default {
    data(){
      return{
        chooseType: 0,//0：假期，1：特殊工作日
        holiday_list:[],
        work_list:[],
        canOperation: false, //判断身份是否可以操作
      }
    },
    components:{
      workDay,
    },
    computed:{
      ...mapGetters([
        'showWorkDay'
      ])
    },
    created(){
      let self = this
      let authoritiesList = JSON.parse(localStorage.getItem('authoritiesList'))
      for (let i = 0; i < authoritiesList.length; i++){
        if (authoritiesList[i] == 'ROLE_CHECK'){
          self.canOperation = true
        }
      }
    },
    mounted(){
      this.getWorkDay({type:0});
      this.getWorkDay({type:1});
    },
    methods:{
      ...mapActions(['upstate']),
      //获取数据
      getWorkDay(params){
        let self = this
        self.$http.get(self.conURL + 'pm/api/work_day?' + qs.stringify(params)).then(res => {
          if (params.type=="0"){
            self.holiday_list = res.data;
          }else{
            self.work_list = res.data;
          }
        })
      },
      //时间转换
      toTime(time){
        let date = new Date(time * 1000);
        let M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
        let D = date.getDate() + ' ';
        return M + D;
      },
      //显示弹窗
      showWorkDayPlant(type){
        let self = this
        if (self.canOperation){
          self.chooseType = type
          self.upstate({key:'showWorkDay',val:true})
        }
      },
      //组件返回值
      getBack(par){
        let self = this
        if (par){
          self.upstate({key:'showWorkDay',val:false})
          self.getWorkDay({type:0});
          self.getWorkDay({type:1});
        }
      },
      //删除
      deleteDay(id){
        let self = this
        if (self.canOperation){
          let params={
            id:id
          }
          self.$http.get(self.conURL + 'pm/api/work_day/delete?' + qs.stringify(params)).then(res => {
            self.$notify({
              title: '成功',
              message: '删除成功',
              type: 'success'
            });
            self.getWorkDay({type:0});
            self.getWorkDay({type:1});
          })
        }
      },
    }
  }
</script>

<style lang="less" scoped>
  .vacation{
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 28px;
    padding-top: 0;
    box-sizing: border-box;
    .title{
      font-size: 20px;
      color: #333333;
    }
    .holiday{
      display: flex;
      flex-direction: column;
      .h_title{
        display: flex;
        flex-direction: row;
        margin-bottom: 20px;
        .tl1{
          font-size: 18px;
          color: #222222;
          font-weight: 600;
          margin-right: 15px;
          line-height: 18px;
        }
        .tl2{
          font-size: 14px;
          color: #999999;
          line-height: 18px;
        }
      }
      .lists{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        .list{
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          padding: 17px 19px;
          font-size: 16px;
          color: #666666;
          background: #fff;
          border-radius: 2px;
          border: 1px solid #e5e5e5;
          margin-right: 18px;
          margin-bottom: 18px;
          .list_left{
            margin-right: 60px;
          }
          .list_right{
            cursor: pointer;
            color: #e85151;
          }
        }
        .add{
          display: flex;
          flex-direction: row;
          margin-bottom: 18px;
          cursor: pointer;
          .add_left{
            margin: auto 5px auto 0;
            .el-icon-circle-plus{
              font-size: 22px;
              color: #3384dd;
              margin-top: 3px;
            }
          }
          .add_right{
            font-size: 16px;
            color: #3384dd;
            margin-top: auto;
            margin-bottom: auto;
          }
        }
      }
    }
    .bc{
      width: 100%;
      height: 100%;
      z-index: 9;
      background: #000;
      opacity: 0.3;
      position: fixed;
      left: 0;
      top: 0;
    }
  }
</style>
